<template>
    <div class="mycontainer">
      <div class="input-container">
        <textarea v-model="inputXml" placeholder="请输入XML字符串" rows="10" @input="handleInput"></textarea>
        <!-- <button @click="formatXml">格式化</button> -->
      </div>
      <div class="output-container">
       <pre><code class="xml" v-html="formattedXml"></code></pre>
        <!-- <button @click="copyXml">复制</button> -->
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import hljs from 'highlight.js';
  import 'highlight.js/styles/monokai.css';
  
  export default {
    setup() {
      const inputXml = ref('');
      const formattedXml = ref('');
  
      const handleInput = () => {
        formatXml();
      };
  
      const formatXml = () => {
        try {
          const parser = new DOMParser();
          const xmlDoc = parser.parseFromString(inputXml.value, 'text/xml');
          const serializer = new XMLSerializer();
          const formatted = serializer.serializeToString(xmlDoc);
          formattedXml.value = hljs.highlight(formatted, { language: 'xml' }).value;
        } catch (e) {
          formattedXml.value = '<span style="color: red;">无效的XML字符串</span>';
        }
      };
  
      const copyXml = () => {
        const textarea = document.createElement('textarea');
        textarea.value = formattedXml.value;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('已复制格式化后的XML');
      };
  
      return {
        inputXml,
        formattedXml,
        handleInput,
        formatXml,
        copyXml
      };
    }
  };
  </script>
  
  <style scoped>
  /* 使用与JsonFormatter.vue相同的样式 */
  .mycontainer {
    display: flex;
    height: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 20px;
}

.input-container{
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    word-wrap: break-word;
    /* 自动换行 */
    overflow-wrap: break-word;
    /* 自动换行 */
    overflow-x: auto;
    /* 添加横向滚动条 */
}
.output-container {
    margin-left: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    word-wrap: break-word;
    /* 自动换行 */
    overflow-wrap: break-word;
    /* 自动换行 */
    overflow-x: auto;
    /* 添加横向滚动条 */
}

textarea {
    flex: 1;
    padding: 10px;
    border: none;
    resize: none;
    outline: none;

}

button {
    margin-top: 10px;
    padding: 10px;
    width: 120px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

pre {
    margin: 0;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 10px;
    overflow-x: auto;
    white-space: pre-wrap;
    /* 自动换行 */
    word-wrap: break-word;
    /* 自动换行 */
    background-color: #fff;
    height: 100%;
}

code {
    font-family: 'Consolas', 'Times New Roman', Courier, monospace;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
}
  </style>